<template>
  <div class="bg"></div>
  <div class="container">
    <div class="continaer-side"></div>
    <div class="container-main"></div>
  </div>
</template>
<script lang="ts">
// @ is an alias to /src
import { defineComponent, onMounted, nextTick } from 'vue';
import { Graph, Addon } from '@antv/x6';
export default defineComponent({
  // 已启用类型推断
  name: '',
  components: {},
  setup() {
    onMounted(async () => {
      await nextTick();

      const data = {
        // 节点
        nodes: [
          {
            id: 'node1', // String，可选，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: 'hello', // String，节点标签
            ports: [
              {
                id: 'port1',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff',
                  },
                },
              },
              {
                id: 'port2',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff',
                  },
                },
              },
              {
                id: 'port3',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff',
                  },
                },
              },
            ],
          },
          {
            id: 'node2', // String，节点的唯一标识
            x: 160, // Number，必选，节点位置的 x 值
            y: 180, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: 'world', // String，节点标签
            ports: [
              {
                id: 'port4',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff',
                  },
                },
              },
              {
                id: 'port5',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff',
                  },
                },
              },
              {
                id: 'port6',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff',
                  },
                },
              },
            ],
          },
        ],
        // 边
        edges: [
          {
            source: 'node1', // String，必须，起始节点 id
            target: 'node2', // String，必须，目标节点 id
          },
          //   {
          //     source: 'node2', // String，必须，起始节点 id
          //     target: 'node1', // String，必须，目标节点 id
          //   },
        ],
      };

      const graph = new Graph({
        // 对齐线
        snapline: {
          enabled: true,
        },
        //   复制
        clipboard: {
          enabled: true,
        },
        container: document.querySelector('.container-main'),
        width: 600,
        height: 600,
        background: {
          color: '#78befc',
        },
        grid: {
          size: 10,
          visible: true,
        },
      });

      // 拖拽
      //   const dnd = new Addon.Dnd({
      //     target: graph,
      //     // delegateGraphOptions(){},
      //     getDragNode(node) {
      //       return graph.createNode({
      //         width: 100,
      //         height: 100,
      //         shape: 'rect',
      //         attrs: {
      //           body: {
      //             fill: '#ccc',
      //           },
      //         },
      //       });
      //     },
      //   });

      //   dnd.start(node,e)

      const stencil = new Addon.Stencil({
        stencilGraphWidth: 100,
        search: (cell, keyword, groupName, stencil) => {
          console.log(keyword);
          if (keyword) {
            return cell.shape === 'rect';
          }
          return true;
        },
      });

      document.querySelector('.continaer-side').appendChild(stencil.container);

      graph.fromJSON(data);

      graph.on('cell:click', () => {
        console.log(graph.toJSON());
      });
      //
    });
  },
});
</script>
<style scoped>
.bg {
  width: 100%;
  height: 100%;
  display: flex;
}
.container {
  margin: auto;
  display: flex;
  width: 800px;
  height: 800px;
  background-color: wheat;
}
.continaer-side {
  min-width: 100px;
  flex: 1;
}
.continaer-main {
  flex: 4;
}
</style>
